<template>


<button @click="PiLiang">批量删除</button>

<button @click="PiLiang1">批量修改</button>
<table class="table table-bordered">
    <thead>

        <tr>
    <th>
        <input type="checkbox"  v-model="Quanxun" @change="nnn">
    </th>
    <th>房号id</th>
    <th>房型名称</th>
    <th>房间号码</th>
    <th>房间描述</th>
    <th>是否上架</th>
    <th>操作</th>
</tr>
    </thead  >

    <tbody v-for="item in Show1" v-show="item.isDel==true" >

        <tr>
            <th>
        <input type="checkbox"  :checked="FanXuan" v-model="arrides">
    </th>
    <th>{{item.hid }}</th>
    <th>{{item.fname }}</th>
    <th>{{item.hname }}</th>
    <th>{{item.hMianShu }}</th>
    <th>{{item.isState?"上架":"下架" }}</th>
    <th><button @click="IsDel(item.hid)">删除</button>
    
    <button @click="Upstate(item.hid)" v-show="item.isState==false">上架</button>
    <button @click="Upstate(item.hid)"   v-show="item.isState==true">下架</button>
    </th>
</tr>


    </tbody>
</table>




</template>


<script setup lang="ts">

import axios from 'axios';
import{ref,onMounted, reactive} from 'vue'


onMounted(()=>{  //钩子函数


    Show();
})


//用来接受后台传值响应式数据

const Show1 =ref([{

    "hid": 1,
    "xid": 2,
    "hname": 123,
    "hMianShu": "123",
    "isState": true,
    "isDel": true,
    "fname": "超级小房间"


}])



//显示函数


const Show=()=>{

    axios.get('https://localhost:7247/api/FangHao/ShowFangHao').then(res=>{

        Show1.value=res.data
    })


}


const arrides:any=ref([]) //用来存放多个id
const Quanxun=ref(false) //全选响应式函数
const FanXuan=ref(false) //反选响应式函数




//全选的方法
const   nnn =()=>{

    if(Quanxun.value==true)
    {
        FanXuan.value=true;
        arrides.value=Show1.value.map((item:any)=>{

            return item.hid
        })
      
    }
    else
    {    FanXuan.value=false;

    }

}



//房号逻辑删除
const IsDel=(id:any)=>{

    if(!confirm('确定删除吗?'))
{
    return ;
}

 axios.delete('https://localhost:7247/api/FangHao/IsDel?id='+id).then(res=>{

    if(res.data>0)
 {
    alert('删除成功')
    Show();
 }
 else
 {
    alert('删除失败')
 }
 })



}

  //批量删除
  const PiLiang=()=>{
  
    IsDel(arrides.value.toString())
  }




//房号上架
const Upstate=(id:any)=>{

if(!confirm('确定修改吗?'))
{
return ;
}

axios.get('https://localhost:7247/api/FangHao/UpstateFH?id='+id).then(res=>{

if(res.data>0)
{
alert('修改成功')
Show();
}
else
{
alert('修改失败')
}
})



}

//批量上架
const PiLiang1=()=>{

    Upstate(arrides.value.toString())
}

</script>